<template>

  <!-- 定义布局容器 -->
  <el-container class="home-container">

    <!-- 定义头标签 -->
    <el-header>
      <div>
        <img src="../../assets/images/logo.png" alt="">
        <span>趣办公</span>
        <div>
        </div>
        <el-radio-group v-model="isCollapse" style="margin: 0 20px;">
          <el-radio-button :label="false"><i class="el-icon-s-unfold"></i></el-radio-button>
          <el-radio-button :label="true"><i class="el-icon-s-fold"></i></el-radio-button>
        </el-radio-group>
      </div>
      <div>
        <span>欢迎：{{ user }}</span>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <el-avatar>{{ user }}</el-avatar>
          </span>
          <el-dropdown-menu slot="dropdown" style="margin-left: 15px">
            <el-dropdown-item command="b" divided>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 定义中间区域-->
    <el-container>
      <!-- 当打开左侧菜单时 宽度为200, 当不打开时为默认值-->
      <el-aside :width="isCollapse ? '64px' : '200px' ">
        <el-menu background-color="#0D5477" text-color="#fff" active-text-color="#4094ff" :collapse="isCollapse"
                 :collapse-transition="isCollapseTransition" @open="handleOpen" @close="handleClose" router>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">用户</span>
            </template>
            <el-menu-item index="1-1" route="/admin/userManger">
              <i class="el-icon-s-claim"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">组织</span>
            </template>
            <el-menu-item index="2-1" route="/admin/depManger">
              <i class="el-icon-menu"></i>
              <span slot="title">部门管理</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">接口</span>
            </template>
            <el-menu-item index="3-1" route="/admin/interfaceDoc">
              <i class="el-icon-menu"></i>
              <span slot="title">接口文档</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 定义主页面结构-->
      <el-main>
        <!-- 定义路由展现页面-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

export default {
  data() {
    return {
      url: 'https://img-operation.csdnimg.cn/plugin/image/icon/1624254853328.png',
      user: '',
      isCollapse: false,
      isCollapseTransition: false
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleCommand(command) {
      if (command === 'b') {
        this.$cookies.remove('username')
        this.$cookies.remove('password')
        this.$router.push('/')
      }
    }
  },
  created() {
    this.user = this.$cookies.get('username')
  }
}
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>
.el-header {
  background-color: #143F6D;
  display: flex; //灵活的盒子容器
  justify-content: space-between; //左右对齐
  align-items: center; //文本元素居中对齐
  color: #FFFFFF; //设定字体颜色
  padding-left: 1px;

  > div {
    display: flex;
    align-items: center;

    span {
      margin-left: 15px;
      font-size: 18px;
      font-weight: bold;
    }
  }
}

.el-aside {
  background-color: #0D5477;

  .el-menu {
    border-right: none;
  }
}

.el-main {
  background-color: #EEEEEE;
}

.home-container {
  height: 100%;
  width: 100%;
}

.iconfont {
  margin-right: 8px;
}

//定义折叠项
.leftCollapse {
  //设定背景色
  background-color: #708090;
  //定义字体大小
  font-size: 10px;
  //定义行高
  line-height: 60px;
  //定义颜色
  color: #FFFFFF;
  //设置居中
  text-align: center;
  //设定字符间距
  letter-spacing: 4px;
  //鼠标放上之后设置为小手
  cursor: pointer;
  margin: 0 20px;
  width: 50px;
}
</style>
